import { HTMLAttributes } from 'react'

type SvgWithColor = {
  className?: string
} & HTMLAttributes<SVGElement>

export const Logo = ({ className }: SvgWithColor) => {
  return (
    <svg
      className={className}
      fill={'none'}
      height={'36'}
      viewBox={'0 0 157 36'}
      width={'157'}
      xmlns={'http://www.w3.org/2000/svg'}
    >
      <path
        className={className}
        d={
          'M70.9892 24.716C69.7047 24.716 68.5403 24.4392 67.4959 23.8856C66.4636 23.32 65.6473 22.5438 65.047 21.5569C64.4588 20.5581 64.1647 19.4329 64.1647 18.1813C64.1647 16.9297 64.4588 15.8105 65.047 14.8237C65.6473 13.8249 66.4636 13.0487 67.4959 12.4951C68.5403 11.9295 69.7107 11.6467 71.0072 11.6467C72.0996 11.6467 73.0839 11.8392 73.9602 12.2243C74.8485 12.6094 75.5928 13.163 76.193 13.885L74.3203 15.618C73.468 14.6312 72.4117 14.1378 71.1512 14.1378C70.3709 14.1378 69.6747 14.3123 69.0625 14.6613C68.4503 14.9982 67.9701 15.4736 67.622 16.0873C67.2858 16.7011 67.1178 17.3991 67.1178 18.1813C67.1178 18.9635 67.2858 19.6615 67.622 20.2753C67.9701 20.889 68.4503 21.3704 69.0625 21.7194C69.6747 22.0564 70.3709 22.2248 71.1512 22.2248C72.4117 22.2248 73.468 21.7254 74.3203 20.7266L76.193 22.4595C75.5928 23.1936 74.8485 23.7532 73.9602 24.1383C73.0719 24.5234 72.0815 24.716 70.9892 24.716Z'
        }
        fill={'white'}
      />
      <path
        className={className}
        d={
          'M83.6574 24.716C81.8567 24.716 80.4522 24.2165 79.4439 23.2177C78.4475 22.2188 77.9493 20.7928 77.9493 18.9395V11.8633H80.8664V18.8312C80.8664 21.0936 81.8027 22.2248 83.6754 22.2248C84.5877 22.2248 85.2839 21.9541 85.7641 21.4125C86.2443 20.8589 86.4844 19.9985 86.4844 18.8312V11.8633H89.3654V18.9395C89.3654 20.7928 88.8612 22.2188 87.8529 23.2177C86.8565 24.2165 85.458 24.716 83.6574 24.716Z'
        }
        fill={'white'}
      />
      <path
        className={className}
        d={
          'M101.503 17.9286C102.224 18.1572 102.788 18.5423 103.196 19.0839C103.604 19.6134 103.808 20.2693 103.808 21.0515C103.808 22.1587 103.376 23.0131 102.512 23.6148C101.659 24.2045 100.411 24.4993 98.7663 24.4993H92.248V11.8633H98.4062C99.9427 11.8633 101.119 12.1581 101.935 12.7478C102.764 13.3375 103.178 14.1378 103.178 15.1486C103.178 15.7624 103.028 16.31 102.728 16.7913C102.44 17.2727 102.031 17.6518 101.503 17.9286ZM95.147 14.0656V17.0441H98.046C98.7663 17.0441 99.3125 16.9177 99.6846 16.665C100.057 16.4123 100.243 16.0392 100.243 15.5458C100.243 15.0524 100.057 14.6853 99.6846 14.4446C99.3125 14.1919 98.7663 14.0656 98.046 14.0656H95.147ZM98.5502 22.297C99.3185 22.297 99.8947 22.1707 100.279 21.918C100.675 21.6652 100.873 21.2741 100.873 20.7446C100.873 19.6976 100.099 19.1741 98.5502 19.1741H95.147V22.297H98.5502Z'
        }
        fill={'white'}
      />
      <path
        className={className}
        d={
          'M114.317 21.7916H108.465L107.349 24.4993H104.36L109.978 11.8633H112.859L118.495 24.4993H115.434L114.317 21.7916ZM113.399 19.5713L111.4 14.7335L109.402 19.5713H113.399Z'
        }
        fill={'white'}
      />
      <path
        className={className}
        d={'M121.781 14.2461H117.747V11.8633H128.731V14.2461H124.698V24.4993H121.781V14.2461Z'}
        fill={'white'}
      />
      <path
        className={className}
        d={
          'M136.229 24.716C134.92 24.716 133.738 24.4331 132.682 23.8675C131.637 23.3019 130.815 22.5257 130.215 21.5389C129.627 20.54 129.332 19.4208 129.332 18.1813C129.332 16.9418 129.627 15.8286 130.215 14.8418C130.815 13.8429 131.637 13.0607 132.682 12.4951C133.738 11.9295 134.92 11.6467 136.229 11.6467C137.537 11.6467 138.714 11.9295 139.758 12.4951C140.802 13.0607 141.625 13.8429 142.225 14.8418C142.825 15.8286 143.125 16.9418 143.125 18.1813C143.125 19.4208 142.825 20.54 142.225 21.5389C141.625 22.5257 140.802 23.3019 139.758 23.8675C138.714 24.4331 137.537 24.716 136.229 24.716ZM136.229 22.2248C136.973 22.2248 137.645 22.0564 138.246 21.7194C138.846 21.3704 139.314 20.889 139.65 20.2753C139.998 19.6615 140.172 18.9635 140.172 18.1813C140.172 17.3991 139.998 16.7011 139.65 16.0873C139.314 15.4736 138.846 14.9982 138.246 14.6613C137.645 14.3123 136.973 14.1378 136.229 14.1378C135.485 14.1378 134.812 14.3123 134.212 14.6613C133.612 14.9982 133.138 15.4736 132.79 16.0873C132.454 16.7011 132.285 17.3991 132.285 18.1813C132.285 18.9635 132.454 19.6615 132.79 20.2753C133.138 20.889 133.612 21.3704 134.212 21.7194C134.812 22.0564 135.485 22.2248 136.229 22.2248Z'
        }
        fill={'white'}
      />
      <path
        className={className}
        d={
          'M153.348 24.4993L150.918 20.9793H150.774H148.235V24.4993H145.318V11.8633H150.774C151.89 11.8633 152.856 12.0498 153.673 12.4229C154.501 12.7959 155.137 13.3254 155.581 14.0114C156.025 14.6974 156.247 15.5097 156.247 16.4484C156.247 17.387 156.019 18.1994 155.563 18.8853C155.119 19.5592 154.483 20.0767 153.655 20.4377L156.482 24.4993H153.348ZM153.294 16.4484C153.294 15.7383 153.066 15.1968 152.61 14.8237C152.154 14.4386 151.488 14.2461 150.611 14.2461H148.235V18.6506H150.611C151.488 18.6506 152.154 18.4581 152.61 18.073C153.066 17.6879 153.294 17.1463 153.294 16.4484Z'
        }
        fill={'white'}
      />
      <path className={className} d={'M0 11.8784H2.91247V24.4724H0V11.8784Z'} fill={'white'} />
      <path
        className={className}
        d={'M8.50595 14.2532H4.47883V11.8784H15.4455V14.2532H11.4184V24.4724H8.50595V14.2532Z'}
        fill={'white'}
      />
      <path
        className={className}
        d={'M33.7412 11.8784H36.6578V24.4724H33.7412V11.8784Z'}
        fill={'white'}
      />
      <path
        className={className}
        d={
          'M51.2066 11.8784V24.4724H48.8122L42.529 16.826V24.4724H39.6485V11.8784H42.061L48.3261 19.5248V11.8784H51.2066Z'
        }
        fill={'white'}
      />
      <path
        clipRule={'evenodd'}
        d={
          'M34.9871 6.53499C36.0696 6.53499 36.9474 7.41279 36.9474 8.49538C36.9474 9.57798 36.0696 10.4558 34.9871 10.4558C33.9045 10.4558 33.0266 9.57798 33.0266 8.49538C33.0266 7.41279 33.9045 6.53499 34.9871 6.53499Z'
        }
        fill={'#FF0808'}
        fillRule={'evenodd'}
      />
      <path
        className={className}
        clipRule={'evenodd'}
        d={
          'M19.4921 16.0372C20.6078 16.0372 21.512 16.9147 21.512 17.9976C21.512 19.0805 20.6078 19.958 19.4921 19.958C18.3765 19.958 17.4724 19.0805 17.4724 17.9976C17.4724 16.9147 18.3765 16.0372 19.4921 16.0372Z'
        }
        fill={'white'}
        fillRule={'evenodd'}
      />
      <path
        className={className}
        clipRule={'evenodd'}
        d={
          'M42.4778 34.5C51.5905 34.5 58.9778 27.1127 58.9778 18C58.9778 8.8873 51.5905 1.5 42.4778 1.5C33.3651 1.5 25.9778 8.8873 25.9778 18C25.9778 27.1127 33.3651 34.5 42.4778 34.5ZM42.4778 36C52.419 36 60.4778 27.9411 60.4778 18C60.4778 8.05887 52.419 0 42.4778 0C32.5367 0 24.4778 8.05887 24.4778 18C24.4778 27.9411 32.5367 36 42.4778 36Z'
        }
        fill={'white'}
        fillRule={'evenodd'}
      />
    </svg>
  )
}
